import { createSlice, createAsyncThunk} from '@reduxjs/toolkit';
// import axios from 'axios';
import {articleListApi} from '@/api/requestApi'
// 使用nanoid生成唯一值
import { nanoid } from 'nanoid'

// 定义初始状态
const initialState = {
  articleList: [], // 存储文章列表的
}; 
interface ArticleListItem {
  id: number;
  key: string;
  title: string;
  createdAt: string;
}
// 通过使用createAsyncThunk函数,异步获取文章列表数据
const fetchArticleList = createAsyncThunk('fetchArticleList', async ():Promise<ArticleListItem> => {
  // const {data} = await axios.get('http://blogapi.shbwyz.com/article/list')
  const {data} = await articleListApi()
  // console.log(res, 'res')
  // 因为antd组件库中的table组件data属性需要要key值,这里对获取到的数据做一个处理,添加key,以及返回我们需要的数据字段
  // return 
  const dataList = data.rows.map(item=>({
    key:item.id, // 使用nanoid生成唯一id
    id:item.id,
    title:item.title,
    createdAt:item.createdAt
  }))
  // console.log(dataList)
  return dataList
})

// 创建一个 Redux slice
const articleSlice = createSlice({
  name: 'article',
  initialState,
  reducers: {
    // 搜索到文章之后更新文章列表数据
    updateArticleList: (state, {payload}) => {
     console.log(payload,'payload')
     // 数组方法中有哪些方法是能够对原数组元素操作之后返回的还是一个数组结构  map  forEach
      state.articleList = payload
    },

  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchArticleList.fulfilled, (state, { payload }) => {
        // 请求成功时
        // console.log(state, payload, 'fulfilled')
        // 数据的重新赋值
        state.articleList = payload
      })
  }
});

// 这里是单独将获取文章列表的异步函数导出
export { fetchArticleList }


// 导出action creators
export const { updateArticleList } = articleSlice.actions;
// 导出reducer
export default articleSlice.reducer;